<template>
	<view>
		<view class="wos-flex wos-flex-row wos-flex-between">
			<view class="nav">
				<view class="wos-flex wos-text-sm ">
					<view class="btn btn-color-black" @tap="getList">
						<text>刷新</text>
					</view>
					<view class="btn btn-color-blue" @tap="maskAdd = true">
						<text>新建</text>
					</view>
				</view>
				<view>
					<input v-if="keyList.length > 0" class="keyword" type="text" v-model="keyword" placeholder="搜索" />
				</view>
				<view class="item wos-hand" @tap="showValue(item)" v-for="(item, index) in keyList" :key="index" v-show="item.indexOf(keyword)>-1">
					<text class="wos-title-ellipsis-3 " :class="keyName == item ? 'active' : ''">{{item}}</text>
				</view>
			</view>
			<view class="wos-flex-auto" id="codearea">
				<view class="wos-flex wos-text-sm wos-flex-row wos-align-end " v-show="keyValue.length>0">
					<view class="btn btn-color-yellow" @click="save">
						<text>保存</text>
					</view>
					<view class="btn btn-color-red" @tap="del()">
						<text>删除</text>
					</view>
				</view>
				<view id="code" v-show="keyValue.length>0">
					<textarea class="input" v-model="keyValue" auto-height placeholder="value" />
				</view>
			</view>
		</view>
		
		<view id="mask" v-show="mask"></view>
		
		<view class="mask-input" v-show="maskAdd">
			<view class="mask-input-main">
				<h1>添加新KEY</h1>
				<view>
					<input class="input" type="text" placeholder="key" v-model="add.key" />
					<textarea class="input" v-model="add.value" auto-height placeholder="value" />
					<input class="input" type="number" placeholder="销毁时间" v-model="add.time">
					<u class="wos-text-sm">无倒计时可不填</u>
				</view>
				<view class="add-btn">
					<button type="primary" @tap="addRedis()">添加</button>
					<button type="default" @tap="maskAdd = false">取消</button>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {getRedisList,getRedisValue,saveRedis,delRedis} from '@/api/index.js'
	export default {
		data() {
			return {
				keyword:"",
				add:{
					key:"",
					value:"",
					time:""
				},
				mask:false,
				maskAdd:false,
				keyList:[],
				keyValue:"",
				keyName:""
			}
		},
		watch:{
			maskAdd:function(newVal){
				this.mask = newVal
			}
		},
		async mounted() {
			this.keyList = await getRedisList()
			console.log("<<<<<<", this.keyList)
		},
		methods: {
			
			async getList(){
				this.keyList = await getRedisList()
				this.keyValue = ''
				this.keyName = ''
			},
			async showValue(keyName){
				this.keyValue = await getRedisValue(keyName)
				this.keyName = keyName
			},
			async save(){
				let r = await saveRedis(this.keyName,this.keyValue)
				console.log( r )
			},
			async del(){
				uni.showModal({
					title: '提示',
					content: '是否删除删除这个KEY',
					success: async (res) => {
						if (res.confirm) {
							let r = await delRedis(this.keyName)
							this.getList()
						} else if (res.cancel) {
							
						}
					}
				})
			},
			async addRedis(){
				if (this.add.key.length === 0){
					uni.showToast({
						title: '至少输入key名称',
						duration: 2000,
						icon:"none"
					});
				}
				let r = await saveRedis(this.add.key,this.add.value, this.add.time)
				if( r ){
					this.maskAdd = false
					this.add.key = ''
					this.add.value = ''
					this.add.time = ''
					this.getList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	#codearea{
		padding: 30rpx;
		#code{
			padding: 30rpx 0;
			textarea{
				font-size: 30px;
			}
		}
	}
	#mask{
		z-index: 100;
		background-color: rgba(0,0,0,0.8);
		position: fixed;
		width: 100vw;
		height: 100vh;
		top:0;
		left:0
	}
	.mask-input{
		z-index: 101;
		
		position: fixed;
		width: 100vw;
		height: 100vh;
		top:0;
		left:0;
		.mask-input-main{
			margin: 0 auto;
			margin-top: 200px;
			width: 500px;
			background-color: #FFFFFF;
			padding: 30px;
			h1{
				margin-bottom: 30px;
			}
			.input{
				height: 56rpx;
				line-height: 56rpx;
				border-bottom: 1rpx solid #DDDDDD;
				margin-top: 20rpx;
				width: 100%;
			}
			.add-btn{
				margin-top: 50px;
			}
			button{
				margin-top: 10px;
			}
		}
	}
	.keyword{
		border:1rpx solid #DDDDDD;
		padding: 5rpx 10rpx;
		margin: 15rpx 0;
	}
	.nav{
		min-width: 15vw;
		min-height: 100vh;
		padding: 30rpx 30rpx;
		border-right: 1rpx solid #DDDDDD;
		.item{
			padding: 10rpx 10rpx;
		}
		.active{
			color:$wos-font-green;
			font-weight: bold;
			border-bottom: 1rpx solid $wos-font-green;
		}
	}
	.btn{
		color: #FFFFFF;
		padding: 5rpx 10rpx;
		margin: 0 5rpx 0 0;
		cursor: pointer;
		font-size: 16px;
	}
	.btn-color-green{
		background-color: $wos-font-green;
	}
	.btn-color-blue{
		background-color: $uni-color-primary;
	}
	.btn-color-red{
		background-color: $uni-color-error;
	}
	.btn-color-yellow{
		background-color: $uni-color-warning;
	}
	.btn-color-black{
		background-color: $uni-text-color-grey;
	}
</style>
